<template>
  <app-container :percept="true">

    <view class="flex-col page">
      <view class="flex-col section">
        <view class="flex-row justify-center items-center relative section_3">
          <text class="text">{{$t('vip.title')}}</text>
        </view>
        <view class="flex-col justify-start relative group">
          <view class="flex-col justify-start items-center relative group_2">
            <image
                   class="image_5"
                   src="@/static/vip/vip-top.png" />
            <image
                   class="image_6 pos_3"
                   src="@/static/vip/top-two.png" />
            <text class="font_2 text_3 pos_4">{{vipInfoObj.vipName}}</text>
            <text class="text_4 pos_5">{{vipInfoObj.integral}}</text>
            <text class="font_2 text_5 pos_6">{{$t('common.MSDT')}}</text>
            <text class="font_3 text_6 pos_7">{{vipInfoObj.originalIntegral}} {{$t('common.MSDT')}}</text>
          </view>
          <image
                 class="image_4 pos_2"
                 src="@/static/vip/vip.png" />
        </view>
        <view class="flex-col section_4">
          <view class="flex-row items-center">
            <text class="font_3 text_7">{{vipInfoObj.vipName}}</text>
            <text class="font_4 text_8 ml-11">{{$t('vip.buyVipTitle')}}</text>
          </view>
          <view class="flex-col mt-23 gap-1">
            <view v-for="(item,index) in itemList" :key="index" @click="handleSelect(item)">
              <view class="flex-row justify-between items-center section_5" :class="[{'section_6':item.name!=selectType}]">
                <view class="flex-row items-center">
                  <image
                         class="shrink-0 image_7"
                         :src="getImage(item)" />
                  <image
                         class="shrink-0 image_7"
                         src="@/static/vip/money.png" v-if="item.name==='MSDT'" />
                  <image
                         class="shrink-0 image_7"
                         src="@/static/vip/usdt.png" v-if="item.name==='USDT'" />
                  <image
                         class="shrink-0 image_7"
                         src="@/static/vip/SDT.png" v-if="item.name==='SDT'" />
                  <text class="font_5 text_9">{{item.name}}</text>
                  <text class="font_6 text_10">({{$t('vip.remaining')}}: {{item.remaining}})</text>
                </view>
                <image class="image_8" src="@/static/vip/select.png" v-if="selectType===item.name" />
                <image class="image_8" src="@/static/vip/noselected.png" v-if="selectType!=item.name" />


              </view>
            </view>


          </view>
          <view class=" flex-col justify-start items-center text-wrapper_2 mt-23" @click="getVipBuyAPI">
            <text class="font_7 text_14">{{$t('vip.confirmPay')}}</text>
          </view>
        </view>
        <view class="flex-col section_7">
          <view class="flex-row justify-center items-center group_3">
            <view class="section_8"></view>
            <text class="font_7 text_15 ml-12">{{$t('vip.vipRights')}}</text>
            <view class="section_9 ml-12"></view>
          </view>
          <view class="grid mt-22">
            <view class="flex-col items-center grid-item_1">
              <image
                     class="image_10"
                     src="@/static/vip/ads.png" />
              <text class="font mt-13">{{$t('vip.ad')}}</text>
            </view>
            <view class="flex-col items-center grid-item">
              <image
                     class="image_11"
                     src="@/static/vip/video.png" />
              <text class="font_4 mt-13">{{$t('vip.hd')}}</text>
            </view>
            <view class="flex-col items-center grid-item_1">
              <image
                     class="image_10"
                     src="@/static/vip/look.png" />
              <text class="font mt-13">{{$t('vip.lookFirst')}}</text>
            </view>
            <view class="flex-col items-center grid-item_2">
              <image
                     class="image_11"
                     src="@/static/vip/link.png" />
              <text class="font_4 text_16 mt-13">{{$t('vip.exemption')}}</text>
            </view>
            <view class="flex-col items-center grid-item_4">
              <image
                     class="image_11"
                     src="@/static/vip/block.png" />
              <text class="font_4 mt-13">{{$t('vip.synthesis')}}</text>
            </view>
            <view class="flex-col items-center grid-item_4">
              <image
                     class="image_10"
                     src="@/static/vip/befite.png" />
              <text class="font_4 mt-13">{{$t('vip.identity')}}</text>
            </view>
          </view>
        </view>
      </view>

    </view>


    <app-tabbar current="vip"></app-tabbar>
  </app-container>


</template>

<script>
import AppTabbar from '@/components/AppTabbar.vue';
import { getVipListAPI, getVipBuyAPI } from '@/service/vip.js'
import { getWalletInfo } from "@/service/mine.js"

export default {
  components: {
    AppTabbar
  },
  props: {},
  data() {
    return {
      itemList: [
        { name: 'MSDT', remaining: 23333, image: 'money.png', key: 'integral' },
        { name: 'USDT', remaining: 23333, image: 'usdt.png', key: 'usdt' },
        { name: 'SDT', remaining: 23333, mage: 'SDT.png', key: 'sdt' },
      ],
      selectType: 'MSDT',
      vipInfoObj: {},
      remainInfo: {}
    };
  },

  onLoad() {
    this.getVipList();
    this.getMoneyInfo()
  },

  methods: {
    async getMoneyInfo() {
      const { data } = await getWalletInfo();
      for (let i = 0; i < Object.keys(data).length; i++) {
        let index = this.itemList.findIndex(item => item.key === Object.keys(data)[i])
        if (index > -1) {
          this.itemList[index].remaining = data[Object.keys(data)[i]]
        }
      }
    },

    handleSelect(item) {
      console.log(item)
      this.selectType = item.name
    },
    getImage(item) {
      return `@/static/mine/${item.image}`
    },
    async getVipList() {
      const res = await getVipListAPI();
      if (res.data) {
        if (res.data.length > 0)
          this.vipInfoObj = res.data[0]
      }
    },
    async getVipBuyAPI() {
      const res = await getVipBuyAPI({
        id: '1937',
        type: this.selectType === 'MSDT' ? 1 : this.selectType === 'USDT' ? 2 : 3
      });
      if (res.data) {
        console.log(res.data)
      }
    }

  },
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}
.ml-11 {
  margin-left: 0.69rem;
}
.mt-23 {
  margin-top: 1.44rem;
}
.mt-13 {
  margin-top: 0.81rem;
}
.mt-33 {
  margin-top: 2.06rem;
}
.page {
  padding-bottom: 1.25rem;
  background-color: #140c2b;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .section {
    background-image: url('@/static/icons/b-home.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 50.75rem;
    .section_2 {
      padding: 1.19rem 0.94rem 1.1rem 2.3rem;
      background-color: #33333300;
      .image {
        width: 1.06rem;
        height: 0.56rem;
      }
      .image_2 {
        width: 0.94rem;
        height: 0.56rem;
      }
      .image_3 {
        width: 1.5rem;
        height: 0.71rem;
      }
    }
    .section_3 {
      padding: 0.99rem 0.98rem 0.92rem;
      background-color: #ffffff00;
      .text {
        color: #ffffff;
        font-size: 1.13rem;
        font-family: PingFang SC;
        line-height: 0.83rem;
      }
      .text-wrapper {
        padding: 0.59rem 0 0.57rem;
        background-color: #0000004d;
        border-radius: 0.5rem;
        backdrop-filter: blur(0.38rem);
        border: solid 0.031rem #ffffff33;
        .text_2 {
          margin-left: 0.29rem;
          margin-right: 0.24rem;
          color: transparent;
          background-image: linear-gradient(114.6deg, #efad8d 0%, #bc4cdd 100%);
          -webkit-background-clip: text;
        }
      }
      .pos {
        position: absolute;
        right: 0.98rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .font {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.56rem;
      color: #ffffff;
    }
    .group {
      margin-left: 1rem;
      padding: 1.5rem 0 0.75rem;
      .group_2 {
        margin-right: 1rem;
        filter: drop-shadow(0rem 0.38rem 0.5rem #00000026);
        .image_5 {
          border-radius: 0.75rem;
          width: 91.4667vw;
          height: 33.8667vw;
        }
        .image_6 {
          width: 91.4667vw;
          height: 33.8667vw;
        }
        .pos_3 {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
        .font_2 {
          font-size: 1.25rem;
          font-family: PingFang SC;
          line-height: 0.93rem;
          color: #ffffff;
        }
        .text_3 {
          line-height: 0.91rem;
        }
        .pos_4 {
          position: absolute;
          left: 1.26rem;
          top: 1.42rem;
        }
        .text_4 {
          color: #ffffff;
          font-size: 1.75rem;
          font-family: PingFang SC;
          font-weight: 600;
          line-height: 1.3rem;
        }
        .pos_5 {
          position: absolute;
          left: 1.32rem;
          bottom: 2.79rem;
        }
        .text_5 {
          font-weight: 600;
          line-height: 0.93rem;
        }
        .pos_6 {
          position: absolute;
          left: 5.84rem;
          bottom: 2.79rem;
        }
        .text_6 {
          color: #ffffff80;
          line-height: 0.74rem;
          text-decoration: line-through;
        }
        .pos_7 {
          position: absolute;
          left: 1.29rem;
          bottom: 1.05rem;
        }
      }
      .image_4 {
        width: 8.75rem;
        height: 8.75rem;
      }
      .pos_2 {
        position: absolute;
        right: 1.38rem;
        top: 0.5rem;
      }
    }
    .section_4 {
      margin: 0 1rem;
      padding: 1.58rem 0.75rem 1.5rem;
      background-color: #ffffff33;
      border-radius: 1rem;
      box-shadow: 0rem -0.75rem 1.5rem #a20a6d1a inset, 0rem 0.5rem 1rem #00000026;
      backdrop-filter: blur(1rem);
      .text_7 {
        color: #ffffff;
        line-height: 0.74rem;
      }
      .text_8 {
        color: #ffffffb3;
      }
      .section_5 {
        padding: 0.94rem 1.19rem;
        background-color: #ffffff33;
        border-radius: 0.75rem;
        border-image-slice: 1;
        border: solid 0.063rem #efad8d;
        .image_7 {
          width: 1.25rem;
          height: 1.25rem;
        }
        .text_9 {
          margin-left: 0.69rem;
          line-height: 0.65rem;
        }
        .text_10 {
          margin-left: 0.17rem;
        }
      }
      .section_6 {
        padding: 1rem 1.25rem;
        background-color: #ffffff1a;
        border-radius: 1rem;
        .image_9 {
          border-radius: 0.38rem;
          width: 1.25rem;
          height: 1.25rem;
        }
        .text_11 {
          line-height: 0.65rem;
        }
        .text_12 {
          margin-left: 0.56rem;
        }
        .text_13 {
          margin-left: 0.23rem;
        }
        .text_1 {
          margin-left: 0.53rem;
        }
        .text_20 {
          margin-left: 0.2rem;
        }
      }
      .font_5 {
        font-size: 0.88rem;
        font-family: PingFang SC;
        line-height: 0.69rem;
        color: #ffffff;
      }
      .font_6 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.78rem;
        color: #ffffff80;
      }
      .image_8 {
        width: 1rem;
        height: 1rem;
      }
      .text-wrapper_2 {
        padding: 1.15rem 0 0.93rem;
        background-image: linear-gradient(126.4deg, #efad8d 0%, #bc4cdd 100%);
        border-radius: 0.75rem;
        .text_14 {
          color: #ffffff;
        }
      }
    }
    .font_3 {
      font-size: 1rem;
      font-family: PingFang SC;
      line-height: 0.69rem;
    }
    .section_7 {
      margin: 0.75rem 1rem -0.56rem;
      padding: 1.58rem 1.31rem 1.25rem;
      background-color: #ffffff33;
      border-radius: 1rem;
      box-shadow: 0rem -0.75rem 1.5rem #a20a6d1a inset, 0rem 0.5rem 1rem #00000026;
      backdrop-filter: blur(1rem);
      .group_3 {
        padding-left: 0.16rem;
        .section_8 {
          background-image: linear-gradient(90deg, #fff7ad00 0%, #fff7ad 100%);
          width: 2.03rem;
          height: 0.031rem;
        }
        .text_15 {
          color: transparent;
          line-height: 0.94rem;
          background-image: linear-gradient(111.8deg, #efad8d 0%, #bc4cdd 53.4%, #7d89fe 100%);
          -webkit-background-clip: text;
        }
        .section_9 {
          background-image: linear-gradient(90deg, #fff7ad 0%, #fff7ad00 100%);
          width: 2.03rem;
          height: 0.031rem;
        }
      }
      .grid {
        height: 8.38rem;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.31rem;
        column-gap: 2.72rem;
        .grid-item_1 {
          padding-bottom: 0.74rem;
          background-image: url('@/static/common/icon-back.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .grid-item {
          padding-bottom: 0.59rem;
          background-image: url('@/static/common/icon-back.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .grid-item_2 {
          padding-bottom: 0.6rem;
          background-image: url('@/static/common/icon-back.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          .text_16 {
            line-height: 0.68rem;
          }
        }
        .grid-item_4 {
          padding-bottom: 0.6rem;
          background-image: url('@/static/common/icon-back.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .image_10 {
          border-radius: 50%;
          width: 1.5rem;
          height: 1.5rem;
        }
      }
    }
    .font_7 {
      font-size: 1rem;
      font-family: PingFang SC;
      line-height: 0.93rem;
    }
    .font_4 {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.69rem;
      color: #ffffff;
    }
  }
  .equal-division {
    position: relative;
    margin: 0 1rem;
    .equal-division-item_1 {
      padding: 0.31rem 0 0.31rem;
      width: 5.36rem;
    }
    .group_4 {
      margin-left: 2.68rem;
      .text_17 {
        color: #ffffff;
        line-height: 0.45rem;
      }
    }
    .font_8 {
      font-size: 0.63rem;
      font-family: PingFang SC;
      line-height: 0.46rem;
      color: #ffffff80;
    }
    .equal-division-item {
      padding: 0.31rem 0 0.32rem;
      width: 5.36rem;
    }
    .group_6 {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .section_10 {
    padding: 0.44rem 0 0.62rem;
    background-color: #ffffff1a;
    border-radius: 2rem;
    box-shadow: 0rem 0rem 2rem #05dfff1a inset, 0rem 0rem 1rem #00000033;
    backdrop-filter: blur(1rem);
  }
  .image_11 {
    width: 1.5rem;
    height: 1.5rem;
  }
}
</style>